<template>
  <div class="content">
    <img class="loading" v-show="loading" src="../../assets/img/5.gif" alt>
    <detail-nav :sightName="sightName"></detail-nav>
    <router-link tag="div" to="/">
      <i class="iconfont icon-fanhui"></i>
    </router-link>
    <img :src="bannerImg" alt @click="showGallary">
    <detail-fade>
      <detail-gallary
        slot="fade"
        :gallaryImgs="gallaryImgs"
        v-show="isGallary"
        @showGallary="showGallary"
      ></detail-gallary>
    </detail-fade>
    <detail-ticket :categoryList="categoryList"></detail-ticket>
  </div>
</template>
<script>
import { DetailModel } from "../../models/DetailModel";
const detailModel = new DetailModel();

import DetailNav from "./components/nav";
import DetailGallary from "./components/gallary";
import DetailTicket from "./components/ticket";
import DetailFade from "./components/fade";
export default {
  name: "detail",
  components: {
    DetailNav,
    DetailGallary,
    DetailTicket,
    DetailFade
  },
  data() {
    return {
      bannerImg: "",
      categoryList: [],
      gallaryImgs: [],
      sightName: "",
      isGallary: false,
      loading: ""
    };
  },
  beforeMount() {
    this.loading = true;
  },
  mounted() {
    var id = this.$route.params.id;
    detailModel.getDetail(id).then(res => {
      this.handleData(res);
    });
  },
  methods: {
    showGallary() {
      this.isGallary = !this.isGallary;
    },
    handleData(res) {
      var data = res.data.data;
      var { bannerImg, gallaryImgs, categoryList, sightName } = data;
      this.bannerImg = bannerImg;
      this.gallaryImgs = gallaryImgs;
      this.categoryList = categoryList;
      this.sightName = sightName;
      this.loading = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  height: 1500px;
}
img {
  width: 100%;
}
i {
  position: absolute;
  left: 20px;
  color: #fff;
  line-height: 40px;
  font-size: 20px;
}
</style>
